<!--
 * @Author: daifen
 * @Date: 2020-09-10 09:52:19
 * @LastEditors: Please set LastEditors
-->
<template>
  <div>
    <!-- textarea -->
    <el-row class="commonTableT" v-if="formType=='textarea'" :class="theSpecial">
      <el-col :span="4" class="commonColText flex-center">
        <span>{{formName}}</span>
      </el-col>
      <el-col :span="20" class="commonTableLeftQuality">
        <el-form-item :prop="formProp" class="flex1">
          <el-input
            :disabled="disabled"
            @change="handleChangeValue"
            v-model.trim="taskForm[formProp]"
            type="textarea"
            v-if="formType=='textarea'"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row class="commonTableT" v-else :class="theSpecial">
      <el-col class="commonColText" :span="4">{{formName}}</el-col>
      <el-col class="commonTableInput align-center" :span="20">
        <el-form-item :prop="formProp" class="flex1">
          <!-- input文本 -->
          <el-input
            v-if="formType=='input-text'"
            v-model.trim="taskForm[formProp]"
            @change="handleChangeValue"
          ></el-input>

          <!-- input数字 -->
          <el-input
            v-if="formType=='input-number'"
            v-model.trim="taskForm[formProp]"
            oninput="value=value.replace(/[^\d.]/g,'')"
          ></el-input>
          <p v-if="formType=='input-number'" class="width-90">万元</p>

          <!-- radio单选 -->
          <common-radio
            :distType="distType"
            @handleChangeRadio="handleChangeRadio"
            :disabled="disabled"
            v-model.trim="taskForm[formProp]"
            v-if="formType=='radio'"
          ></common-radio>

          <!-- select 下拉框 -->
          <common-select
            :distType="distType"
            :disabled="disabled"
            v-model.trim="taskForm[formProp]"
            @handleChangeSelect="handleChangeSelect"
            v-if="formType=='select'"
          ></common-select>

          <!-- 时间 -->
          <el-date-picker
            :disabled="disabled"
            v-model.trim="taskForm[formProp]"
            :editable="true"
            :clearable="true"
            v-if="formType=='time'"
          ></el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "commonForm",
  props: {
    //表单的类型
    formType: {
      type: String,
      default: "input-text",//默认为input的文本框
    },
    //表单的名称
    formName: {
      type: String,
      default: "",
    },
    //传入的prop的名字
    formProp: {
      type: String,
      default: "",
    },
    //判断是否disabled的条件
    disabled: {
      type: Boolean,
      default: false,
    },
    //表单绑定的值
    taskForm: {
      type: Object,
      default: {},
    },
    //单选框的数据字典类型
    distType: {
      type: String,
      default: "",
    },
    //是否是第一项 theFirst为第一个表单的样式  theEnd为最后一个表单的样式
    theSpecial: {
      type: String,
      default: "",
    },
  },
  mounted() {
  },
  methods: {
    //单选框改变事件时的触发事件
    handleChangeRadio() {
      this.$emit("handleChangeRadio");
    },
    //下拉框改变选项时的触发事件
    handleChangeSelect() {
      this.$emit("handleChangeSelect");
    }
  },
};
</script>

<style lang="scss" scoped> 

/deep/.el-upload-list__item:first-child {
  margin-top: 5px;
}

/deep/.el-form-item__content {
  display: flex;
  width: 100%;
}
/deep/.el-form-item {
  padding: 5px 10px;
  margin-bottom: 0;
  width: 100%;
}

/deep/.el-textarea {
  width: 100%;
}

.theFirst {
  border-top: 0;
}
.theEnd {
  border-bottom: 0;
}
</style>